<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>会员用户信息注册页面</title>


<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<link href="<%=request.getContextPath()%>/css/normalize.css" rel="stylesheet"/>
<link href="<%=request.getContextPath()%>/css/jquery-ui.css" rel="stylesheet"/>
<link href="<%=request.getContextPath()%>/css/jquery.idealforms.min.css" rel="stylesheet" media="screen"/>

<style type="text/css">
body{font:normal 15px/1.5 Arial, Helvetica, Free Sans, sans-serif;color: #222;background:url(<%=request.getContextPath()%>/images/pattern.png);overflow-y:scroll;padding:60px 0 0 0;}
#my-form{width:755px;margin:0 auto;border:1px solid #ccc;padding:3em;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,.2);}
#comments{width:350px;height:100px;}
</style>

</head>
<body>


<div class="row">

  <div class="eightcol last">

    <!-- Begin Form -->
	<h1 style="text-align: center;">欢迎来到会员注册页面</h1>
    <form id="my-form" style="margin: auto;">

        <!-- <section name="第一步"> -->

			<div style="display: none;"><label>微信方式:</label><input id="openid" name="openid" type="text" value="<%= request.getSession().getAttribute("openid")%>"/></div>
			<div style="display: none;"><label>微信昵称:</label><input id="nickname" name="nickname" type="text" value="<%= request.getSession().getAttribute("nickname")%>"/></div>
			<div style="display: none;"><label>注册方式:</label><input id="registerWay" name="registerWay" type="text" value="微信注册"/></div>
			<div style="margin-left: 150px;"><label>手机号码:</label><input id="phone" name="phone" type="text" class="mobile"/>
			<a id="verifyphone" style="display: none;">The mobile phone number you entered is not correct, please re-enter it!</a>
			</div>
			<div style="margin-left: 150px;"><label>手机验证码:</label><input id="phoneCode" name="phoneCode" type="text"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button type="button" class="yanzhengma" style="color: blue;">发送验证码</button>
			<a id="verifycode" style="display:none;">The verification code you entered is not correct, please re-enter it!</a>
			</div>
          <div style="margin-left: 150px;"><label>姓名:</label><input id="username" name="username" type="text"/></div>
		  <div style="margin-left: 150px;"><label>选证件类型:</label>
          <select id="idType" name="idType">
            <option value="default">&ndash; 选择证件 &ndash;</option>
            <option value="0">身份证</option>          
          </select>
        </div>
			<div style="margin-left: 150px;"><label>证件号码:</label><input id="idNumber" name="idNumber" type="text"/></div>
		<div style="margin-left: 150px;"><label>性别:</label>
          <select id="gender" name="gender">
            <option value="default">&ndash; 选择性别 &ndash;</option>
            <option value="男">男</option>          
            <option value="女">女</option>          
          </select>
        </div>
          
          <!-- <div><label>密码:</label><input id="pass" name="password" type="password"/></div>
          <div><label>邮箱:</label><input id="email" name="email" data-ideal="required email" type="email"/></div>
          <div><label>出生日期:</label><input name="date" class="datepicker" data-ideal="date" type="text" placeholder="月/日/年"/></div>
          <div><label>上传头像:</label><input id="file" name="file" multiple type="file"/></div>
          <div><label>个人主页:</label><input name="website" data-ideal="url" type="text"/></div>
        </section>
 -->
        

      <div><hr/></div>


      <div style="margin-left: 250px;">
        <button type="submit" id="btnSumbitForm">提交</button>
        <button id="reset" type="button">重置</button>
      </div>
      
    </form>

    <!-- End Form -->

  </div>

</div>


<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.idealforms.js"></script>
<script src="<%=request.getContextPath()%>/layui/layui.js"></script>
<script type="text/javascript">
var times = 60;
layui.use(['layer'], function() {
	var $ = layui.jquery, layer = layui.layer;
	var that = this;
	
	
function roof(){
   if(times == 0){
       $('.yanzhengma').text('发送验证码('+times+'s)');
       $('.yanzhengma').prop('disabled',false);
       $('.yanzhengma').attr('style',"blue");
       $('.yanzhengma').text('发送验证码');
       $(".mobile").prop('disabled',false);
       times = 60;
       return
   }
   $('.yanzhengma').text('发送验证码('+times+'s)');
   times--;

   setTimeout(roof,1000);
}
 	$("#phoneCode").bind('input propertychange',function(){
        	var mobile = $('.mobile').val();
            var yanzheng = $('#phoneCode').val();
        	if(!mobile){
        		$("#verifycode").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifycode").innerHTML="请先填写手机号码，再获取验证码！";
                return
            }
        	/* if(!yzm){
        		$("#verifycode").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifycode").innerHTML="请先发送验证码给该手机号码："+mobile;
        		return
        	} */
            $.getJSON("<%=request.getContextPath()%>/verify/verifyCode.do",{"phone":mobile,"code":yanzheng},function(result){
				  if(result.state==1){
					  $("#verifycode").attr("style","display: none;")
				  }else if(result.state==0){
					  //layer.msg(result.message)
					  //console.log(result.message)
					  $("#verifycode").attr("style","margin-left: 30px;color: red;display: block;")
					  document.getElementById("verifycode").innerHTML=result.message;
				  }
			  });
        })
        

       
      $('.yanzhengma').on('click',function(){

			var phone = $("#phone").val()
			var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        	if(!phone){
				$("#verifyphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码不能为空，请输入！";
				return 
        	}else if(!myreg.test(phone)){
				$("#verifyphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码格式不正确，请重新输入！";
				return 
        	}else{
				$("#verifyphone").attr("style","display: none;")
	            $(this).prop('disabled',true);
	            $(this).attr('style',"grey");
	            $(".mobile").prop('disabled',true);
	            roof();
	            
	            sendToPhone(phone);
	            
        	}
            
        });


function sendToPhone(phone){
			$.getJSON("<%=request.getContextPath()%>/verify/sendSmsByAliyun.do",{"phone":phone},function(result){
				  //console.log(result);
				  if(result.state==1){
					  //layer.msg(result.message)
				  }else{
					 // layer.msg(result.message)
				  }
			  });
    	}
    	

	
	$("#btnSumbitForm").on("click",function(){
		var phone = $("#phone").val()
		var yanzheng = $("#phoneCode").val()
	 		if(!phone){
                 $('#phone').focus();
                 document.querySelector('#phone').placeholder = '请填写手机号码';
                 return
             }
              if(!yanzheng){
                 $('.yanzheng').focus();
                 document.querySelector('.yanzheng').placeholder = '请填写验证码';
                 return
             }
           	 if(codeSty != "display: none;"){
           		$('.yanzheng').focus();
                document.querySelector('.yanzheng').placeholder = '请填写正确验证码';
           		return
           	 }else{
           	
             
		var params = {
			"openid":$("#openid").val(),"nickname":$("#nickname").val(),"registerWay":$("#registerWay").val(),
			"phone":$("#phone").val(),"coded":$("#phoneCode").val(),"username":$("#username").val(),
			"idType":$("#idType").val(),"idNumber":$("#idNumber").val(),"gender":$("#gender").val()
		}
		//console.log(params)
		$.post("<%=request.getContextPath()%>/verify/doSaveWxPhoMember.do",params,function(result){
			//console.log(result)
			if(result.state == 1){
				layer.msg(result.message)
				window.location.href = "<%=request.getContextPath()%>/verify/wxAddMembSuccess.do"
			}else{
				layer.msg(result.message)
			}
			
		})
		}
	})
	 
})
	

var options = {

	onFail: function(){
		alert('输出的信息中有'+ $myform.getInvalid().length +' 个无效字段.' )
	},

	inputs: {
		/* 'password': {
			filters: 'required pass',
		},
		'username': {
			filters: 'required ',
			data: {
			
			}
		},
		'phone': {
			filters: 'min max',
			data: {min: 11, max: 11}
		}, */
		'phoneCode': {
			filters: 'required ',
			data: {}
		},
		'username': {
			filters: 'required ',
			data: {
			
			}
		},
		'idType': {
			filters: 'exclude ',
			data: { exclude: ['default'] },
			errors : {
				exclude: '选择证件.'
			}
		},
		'idNumber': {
			filters: 'min max ',
			data: {min: 18, max: 18}
		},
		'gender': {
			filters: 'exclude ',
			data: { exclude: ['default'] },
			errors : {
				exclude: '选择性别.'
			}
		},
		/* 'file': {
			filters: 'extension',
			data: { extension: ['jpg'] }
		},
		'comments': {
			filters: 'min max',
			data: { min: 50, max: 200 }
		},
		'states': {
			filters: 'exclude',
			data: { exclude: ['default'] },
			errors : {
				exclude: '选择国籍.'
			}
		},
		'langs[]': {
			filters: 'min max',
			data: { min: 2, max: 3 },
			errors: {
				min: 'Check at least <strong>2</strong> options.',
				max: 'No more than <strong>3</strong> options allowed.'
			}
		} */
	}
	
};

var $myform = $('#my-form').idealforms(options).data('idealforms');

$('#reset').click(function(){
	times=0
	$('.yanzhengma').attr('style',"blue");
	$('.yanzhengma').prop('disabled',false);
	$myform.reset().fresh().focusFirst() 
	//  location.reload()
});

$myform.focusFirst();
</script>
<div style="text-align:center;">
</div>
</body>
</html>